<template>
  <div class="box">
    <div class="datu">
      <img src="/static/imgs_s01/s01_banner.png" alt />
    </div>
    <div class="dian">
      <div class="kongbai"></div>
      <div class="xx" @click="goMerchantDetails">
        <span class="sp1">{{details.name}}</span>
        <span class="sp2">{{details.closed==1?'营业中':'已打样'}}</span>
        <ul>
          <span v-for="(list, index) in facilityList" :key="index">
            <li :class="'li' + (index + 1) ">{{list.title}}</li>
          </span>
        </ul>
        <p class="p1">骑士配送·30分钟送达</p>
        <p class="p2">全心全意提供优质的服务，我们一直在努力！</p>
      </div>
    </div>
    <div class="dizhi">
      <img class="ding" src="/static/imgs_s01/s01_position.png" alt @click="callMap" />
      <p @click="callMap">{{details.province}}{{details.city}}{{details.borough}}{{details.address}}</p>
      <img class="dao" src="/static/imgs_s01/s01_daohang.png" alt @click="callMap" />
      <img
        class="phone"
        src="/static/imgs_s01/s01_phone.png"
        @click="goPhoneCall(details.phone)"
        alt
      />
    </div>

    <div class="fuwu">
      <div @click="goTangShiDianCan">
        <img src="/static/imgs_s01/s01_tangshi.png" alt />
        <p class="fu1">堂食点餐</p>
        <p class="fu2">到店轻松点餐</p>
      </div>
      <div @click="takeOut">
        <img src="/static/imgs_s01/s01_wimai.png" alt />
        <p class="fu1">外卖</p>
        <p class="fu2">轻松一点 轻松就餐</p>
      </div>
      <div>
        <img src="/static/imgs_s01/s01_yuyue.png" alt />
        <p class="fu1">预约自提</p>
        <p class="fu2">不用排队 到店即取</p>
      </div>
      <div>
        <img src="/static/imgs_s01/s01_youhui.png" alt />
        <p class="fu1">优惠</p>
        <p class="fu2">点这里 点这里</p>
      </div>
      <div>
        <img src="/static/imgs_s01/s01_bawangcan.png" alt />
        <p class="fu1">霸王餐</p>
        <p class="fu2">品质优选</p>
      </div>
      <div>
        <img src="/static/imgs_s01/s01_order.png" alt />
        <p class="fu1">订单</p>
        <p class="fu2">订单 一目了然</p>
      </div>
      <div>
        <img src="/static/imgs_s01/s01_pay.png" alt />
        <p class="fu1">买单支付</p>
        <p class="fu2">在线支付 买单快捷</p>
      </div>
    </div>

    <div class="tuijian">
      <div class="jian">
        <img src="/static/imgs_s01/s01_tuijain.png" alt />
        <span>店长推荐 (8)</span>
      </div>
      <div class="tui">
        <!-- 时间 2/20/17点38分 -->
        <scroll-view scroll-x="true">
          <view class="banner" scroll-x="true">
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food1.png" alt />
                <p>内蒙古羊肉串</p>
                <span>￥58.00起</span>
              </div>
            </view>
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food1.png" alt />
                <p>内蒙古羊肉串</p>
                <span>￥58.00起</span>
              </div>
            </view>
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food2.png" alt />
                <p>长沙臭豆腐</p>
                <span>￥6.90起</span>
              </div>
            </view>
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food3.png" alt />
                <p>关东煮</p>
                <span>￥9.90起</span>
              </div>
            </view>
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food4.png" alt />
                <p>沙朗牛排套餐</p>
                <span>￥50.00起</span>
              </div>
            </view>
            <view>
              <div>
                <img src="/static/imgs_s01/s01_food4.png" alt />
                <p>沙朗牛排套餐</p>
                <span>￥50.00起</span>
              </div>
            </view>
          </view>
        </scroll-view>
        <!-- 时间 2/20/17点38分 -->
      </div>
    </div>
    <div class="pingjia">
      <img src="/static/imgs_s01/s01_pingjia.png" alt />
      <span>用户评价({{commentData.evaluationNumber}})</span>
      <div class="ping">
        <span class="pi">商家好评率</span>
        <span class="ng">{{commentData.avgScore}}🌟</span>
      </div>
      <div class="jia">
        <div>
          <img src="/static/imgs_s01/s01_buman.png" alt />
          <p>不满 0</p>
        </div>
        <div>
          <img src="/static/imgs_s01/s01_yiban.png" alt />
          <p>一般 0</p>
        </div>
        <div>
          <img src="/static/imgs_s01/s01_happy.png" alt />
          <p>满意 50</p>
        </div>
        <div>
          <img src="/static/imgs_s01/s01_chaozan.png" alt />
          <p>超赞 100</p>
        </div>
      </div>
    </div>
    <div v-for="(list, index) in commentList" :key="index">
      <div :class="'yonghu' + (index + 1)">
      <img class="imgs1" :src="list.member_icon" alt />
      <span class="span1">{{list.member_nick_name}}</span>
      <img class="imgs2" alt />
      <span class="span2">{{list.star==1?'🌟':list.star==2?'🌟🌟':list.star==3?'🌟🌟🌟':list.star==4?'🌟🌟🌟🌟':'🌟🌟🌟🌟🌟'}}</span>
      <p style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{list.content}}</p>
        <span v-for="(imglist, indexs) in list.pics" :key="indexs">
       <img class="imgs3" :src="imglist" alt />
        </span>
      <div>
        <span class="tang">{{list.order_status==0?'外卖':list.order_status==1?'订餐':list.order_status==2?'拼团':list.order_status==3?'预定':list.order_status==4?'超市':'积分订单'}}</span>
        <span class="riqi">{{list.comment_time}}</span>
      </div>
    </div>
    </div>
    <!-- 这个找不到 -->
      <div class="duo" @click="goShanngJiaPingJia">
        <p>查看全部评价</p>
        <img src="/static/imgs_s01/s01_gengduo.png" alt />
      </div>
    <!--  -->
    <div class="foot">
      <img src="/static/imgs_s01/s01_banner.png" alt />
      <p>汇方圆科技</p>
      <div>定制、代理点这里！</div>
      <button
        class="bottom"
        type="primary"
        open-type="getUserInfo"
        lang="zh_CN"
        @getuserinfo="bindGetUserInfo"
      >授权登录</button>
    </div>

    <!-- <div class="dibu">
            <div>
                <img src="/static/imgs_s01/s01_index1.png" alt="">
                <p class="green">首页</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_gouwuche0.png" alt="">
                <p>购物车</p>
            </div>
            <div>
                <img src="/static/imgs_s01/s01_geren0.png" alt="">
                <p>个人中心</p>
            </div>
    </div>-->
  </div>
</template>

<script>
import QQMapWX from "../../../static/js/qqmap-wx-jssdk.js";

export default {
  data() {
    return {
      qqmapsdk: {},
      facilityList: [],
      details: {},
      commentList: [],
      commentData: {}
    };
  },

  methods: {
    goTangShiDianCan() {
      console.log("test");
      wx.navigateTo({ url: "/pages/s10_order01/main" });
    },
    takeOut(){
      wx.navigateTo({ url: "/pages/s10_order02/main" });
    },
    goShanngJiaPingJia() {
      wx.navigateTo({ url: "/pages/s01_pingjia/main" });
    },
    //页面跳转：店家详情页
    goMerchantDetails() {
      wx.navigateTo({ url: "/pages/s01_goodsxiangqing/main" });
    },
    //电话页面跳转
    goPhoneCall(number) {
      console.log(number);
      wx.navigateTo({ url: "/pages/s01_indexphone/main?number=" + number });
    },
    // 地图导航
    callMap() {
      this.getLocation();
      console.log(this.details.province+this.details.city+this.details.borough+this.details.address);
    },
    //跟据目标地址获取经纬度
    getLocation() {
      // 调用接口
      this.qqmapsdk.search({
        keyword: this.details.province+this.details.city+this.details.borough+this.details.address,
        success: ({data}) => {
          console.log(data);
          this.getPath(data[0].location);
        },
        fail: function(res) {
          console.log(res);
        },
        complete: function(res) {
          console.log(res);
        }
      });
    },
    //跟据经纬度打开目的地位置
    getPath(location){
      wx.getLocation({
        type: "gcj02", //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标,
        success: res => {
          const latitude = location.lat;
          const longitude = location.lng;
          wx.openLocation({
            name: this.details.name,
            address: this.details.province+this.details.city+this.details.borough+this.details.address,
            latitude, //纬度，范围为-90~90，负数表示南纬,
            longitude, //经度，范围为-180~180，负数表示西经,
            scale: 18 //缩放比例，范围5~18,
          });
        },
        fail: () => {
          console.log("getLocation failed");
        }
      });
    },
    bindGetUserInfo: function(e) {
      console.log(e);
      if (e.mp.detail.userInfo) {
        // 用户按了允许授权按钮
        // 获取到用户的信息了，打印到控制台上看下
        console.log(e.mp.detail.userInfo);
        wx.getSetting({
          success: function(res) {
            if (res.authSetting["scope.userInfo"]) {
              wx.getUserInfo({
                success: function(res) {
                  // 获取code
                  wx.login({
                    success: r => {
                      // 请求微信接口获得用户的openid
                      wx.request({
                        // 自行补上自己的 APPID 和 SECRET
                        url:
                          "https://api.weixin.qq.com/sns/jscode2session?appid=wx8087d8149331d27c&secret=e8cb3f526ac67e41dffb8fb4201873da&js_code=" +
                          r.code +
                          "&grant_type=authorization_code",
                        success: res => {
                          // 获取到用户的 openid
                          console.log(res.data.openid);
                        }
                      });
                    }
                  });
                }
              });
            }
          }
        });
      }
    }
  },
  onLoad() {
    const that = this;
    //店家详情的数据
    var url = "http://localhost:7777/prom/storeDetails?shopid=1";
    wx.request({
      url,
      success(data) {
        if (data.statusCode == 200) {
          that.facilityList = data.data.facilityList;
          that.details = data.data.details;
        }
      },
      fail(err) {
        console.log(err);
      }
    });
    //实例化导航API的核心类
    this.qqmapsdk = new QQMapWX({
      //key可以去https://lbs.qq.com/qqmap_wx_jssdk/index.html申请
      key: "4XTBZ-ZKA6F-NETJX-JPSZ7-SEUP2-AJBFB"
    });
    //关于的评论数据
    wx.request({
      url: 'http://localhost:7777/prom/getCommentData', //开发者服务器接口地址",
      success(data){
        if(data.statusCode == 200){
          that.commentList = data.data.homeComment;
          that.commentData = data.data.commentData;
        }
      },
      fail: () => {},
    });
  },

  created() {
    // let app = getApp()
  }
};
</script>

<style scoped>
/* 时间 2/20/17点38分 */
.banner {
  height: 160rpx;
  width: 100%;
  display: flex;
  display: -webkit-box;
  flex-direction: column;
}
/* 时间 2/20/17点38分 */
.box {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #f0f2f5;
}

.datu {
  width: 100%;
  height: 136px;
}

.datu img {
  width: 100%;
  height: 136px;
}

.dian {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 122px;
  background-color: white;
}

.dian .kongbai {
  width: 91px;
  height: 91px;
  background: rgba(226, 226, 226, 1);
  border-radius: 6px;
  margin-left: 8px;
  margin-top: 11px;
}

.dian .xx .sp1 {
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
  margin-left: 9px;
  margin-top: 15px;
}

.dian .xx .sp2 {
  display: inline-block;
  width: 45px;
  height: 16px;
  margin-top: 15px;
  margin-left: 9px;
  line-height: 16px;
  text-align: center;
  background: rgba(50, 177, 108, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
}

.dian ul {
  display: flex;
  flex-direction: row;
  margin-top: 9px;
}

.dian ul .li1 {
  width: 33px;
  height: 16px;
  margin-left: 9px;
  margin-right: 3px;
  line-height: 16px;
  text-align: center;
  border: 1px solid rgba(54, 153, 255, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(54, 153, 255, 1);
}

.dian ul .li2 {
  width: 42px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid rgba(241, 145, 73, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(241, 145, 73, 1);
}

.dian ul .li3 {
  width: 33px;
  height: 16px;
  margin-left: 3px;
  margin-right: 3px;
  line-height: 16px;
  text-align: center;
  border: 1px solid rgba(246, 83, 88, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(246, 83, 88, 1);
}

.dian ul .li4 {
  width: 42px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  border: 1px solid rgba(174, 93, 161, 1);
  border-radius: 8px;
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(174, 93, 161, 1);
}

.dian .p1 {
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  margin-left: 9px;
  margin-top: 8px;
  color: rgba(102, 102, 102, 1);
}

.dian .p2 {
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  margin-left: 9px;
  margin-top: 5px;
  color: rgba(102, 102, 102, 1);
}

.dizhi {
  display: flex;
  flex-direction: row;
  height: 39px;
  background-color: white;
}

.dizhi .ding {
  width: 18px;
  height: 18px;
  margin-left: 8px;
  margin-top: 8px;
}

.dizhi p {
  width: 202px;
  height: 27px;
  font-size: 13px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
  margin-left: 5px;
}

.dizhi .dao {
  width: 16px;
  height: 16px;
  margin-left: 46px;
  margin-top: 3px;
}

.dizhi .phone {
  width: 16px;
  height: 16px;
  margin-left: 43px;
  margin-top: 3px;
}

.fuwu {
  width: 100%;
  height: 352px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background-color: white;
  margin-top: 9px;
}

.fuwu div {
  position: relative;
  width: 50%;
  height: 88px;
}

.fuwu img {
  position: absolute;
  width: 51px;
  height: 51px;
  left: 8px;
  top: 20px;
}

.fuwu .fu1 {
  position: absolute;
  top: 23px;
  left: 66px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(0, 0, 0, 1);
  line-height: 32px;
}

.fuwu .fu2 {
  position: absolute;
  left: 66px;
  top: 47px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(73, 73, 73, 1);
  line-height: 32px;
}

.tuijian {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 193px;
  margin-top: 10px;
  background-color: white;
}

.tuijian .jian {
  height: 57px;
}

.tuijian .jian img {
  width: 20px;
  height: 20px;
  margin-top: 18px;
  margin-left: 11px;
}

.tuijian .jian span {
  margin-top: 22px;
  margin-left: 5px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.tuijian .tui {
  display: flex;
  flex-direction: row;
  height: 166px;
}

.tuijian .tui div {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  text-align: center;
}

.tuijian .tui img {
  width: 80px;
  height: 80px;
}

.tuijian .tui p {
  margin-top: 11px;
  margin-bottom: 8px;
  font-size: 12px;
  font-family: PingFang;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}

.tuijian .tui span {
  font-size: 11px;
  font-family: PingFang;
  font-weight: bold;
  color: rgba(247, 83, 88, 1);
}

.pingjia {
  height: 183px;
  margin-top: 9px;
  background-color: white;
}

.pingjia > img {
  width: 20px;
  height: 20px;
  margin-top: 19px;
  margin-left: 11px;
}

.pingjia > span {
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  margin-top: 21px;
  margin-left: 5px;
  color: rgba(51, 51, 51, 1);
}

.pingjia .ping {
  padding-top: 23px;
  height: 47px;
}

.pingjia .ping .pi {
  margin-left: 112px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.pingjia .ping .ng {
  margin-left: 14px;
  font-size: 15px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: rgba(241, 73, 73, 1);
}

.pingjia .jia {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.pingjia .jia img {
  width: 28px;
  height: 28px;
}

.pingjia .jia p {
  margin-top: 9px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.yonghu1 {
  width: 100%;
  height: 225px;
  background-color: white;
}

.yonghu1 .imgs1 {
  width: 24px;
  height: 24px;
  margin-top: 14px;
  margin-left: 16px;
}

.yonghu1 .span1 {
  margin-top: 21px;
  margin-left: 3px;
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.yonghu1 .imgs2 {
  width: 13px;
  height: 13px;
  margin-top: 18px;
  margin-left: 225px;
}

.yonghu1 .span2 {
  margin-top: 20px;
  margin-left: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.yonghu1 p {
  margin-top: 13px;
  margin-left: 13px;
  font-size: 13px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.imgs3,
.imgs4,
.imgs5 {
  width: 100px;
  height: 100px;
  margin-top: 14px;
  margin-left: 18px;
}

.yonghu1 div .tang {
  display: inline-block;
  width: 34px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-top: 19px;
  margin-left: 24px;
  background: rgba(174, 91, 159, 1);
  border-radius: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.yonghu1 div .riqi {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
  margin-top: 20px;
  margin-left: 170px;
}

.yonghu2 {
  width: 100%;
  height: 275px;
  background-color: white;
}

.yonghu2 .imgs1 {
  width: 24px;
  height: 24px;
  margin-top: 14px;
  margin-left: 16px;
}

.yonghu2 .span1 {
  margin-top: 21px;
  margin-left: 3px;
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.yonghu2 .imgs2 {
  width: 13px;
  height: 13px;
  margin-top: 18px;
  margin-left: 225px;
}

.yonghu2 .span2 {
  margin-top: 20px;
  margin-left: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.yonghu2 > p {
  margin-top: 13px;
  margin-left: 13px;
  font-size: 13px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(34, 34, 34, 1);
}

.imgs3,
.imgs4,
.imgs5 {
  width: 100px;
  height: 100px;
  margin-top: 14px;
  margin-left: 18px;
}

.yonghu2 div .tang {
  display: inline-block;
  width: 34px;
  height: 14px;
  line-height: 14px;
  text-align: center;
  margin-top: 19px;
  margin-left: 24px;
  background: rgba(241, 145, 73, 1);
  border-radius: 3px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
}

.yonghu2 div .riqi {
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(163, 165, 168, 1);
  margin-top: 20px;
  margin-left: 170px;
}

.duo {
  position: relative;
  margin-top: 19px;
  margin-left: 139px;
  width: 97px;
  height: 21px;
  border: 1px solid rgba(93, 93, 93, 1);
  opacity: 0.5;
  border-radius: 11px;
}

.duo p {
  position: absolute;
  top: 3px;
  left: 8px;
  font-size: 11px;
  font-family: PingFang;
  font-weight: 500;
  color: rgba(51, 51, 51, 1);
}

.duo img {
  position: absolute;
  top: 5px;
  left: 79px;
  width: 6px;
  height: 10px;
}

.foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 210px;
  margin-top: 10px;
  background-color: #f4f4f4;
}

.foot img {
  width: 100%;
  height: 136px;
}

.foot p {
  font-size: 12px;
  font-family: PingFang;
  font-weight: 500;
  margin-top: 17px;
  color: rgba(144, 144, 144, 1);
}

.foot div {
  width: 109px;
  height: 21px;
  line-height: 21px;
  text-align: center;
  border: 1px solid rgba(50, 177, 108, 1);
  border-radius: 11px;
  font-size: 11px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  margin-top: 10px;
  color: rgba(50, 177, 108, 1);
}

.dibu {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  height: 45px;
  width: 100%;
  background-color: white;
}

.dibu div {
  text-align: center;
}

.dibu img {
  width: 17px;
  height: 18px;
}

.dibu p {
  font-size: 10px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: rgba(187, 187, 187, 1);
  margin-top: 5px;
}

.dibu .green {
  color: rgba(50, 177, 108, 1);
}
</style>
